<template>
    <main>
        <header>
            <div style="padding:0">
                <img src="../assets/images/fq/35b102a6c6c9be8c90505ad66dcb39bd.jpg" alt="" style="width: 100vw;">
            </div>
            <div style="padding:0">
                <img src="../assets/images/fq/3341748a408762dc347f4154c7d90e8f.jpg" alt="" style="width: 100vw;"> 
            </div>
            <div>
                <img src="../assets/images/fq/698d0a387cca51b22a744c32d291854f.gif" alt="">
            </div>
            <div>
                <img src="../assets/images/fq/mst_375615adf8057a7842fbbf28bfd8bc2b_750x597_90.jpg" alt="" style="position:absolute">
                <ul style="position:absolute;z-index:2;">
                    <li v-for="(item,index) in com">
                        <img :src="item.path" alt="">
                        <div style="position:absolute;width:70%;padding:1vw 0; left:15%;top:20vw;background:white;border-radius:1vw">
                            <img :src="item.src" alt="" style="width:13vw;height:6.5vw">
                            <div style="position:relative;height:3.429vw;width:100%;">
                                <img src="../assets/images/fq/mst_c74b259eedf029b332b47e237b8265a2_140x30_90.png" alt="" style="width:16vw;height:3.429vw">
                                <div style="position:relative;line-height:3.429vw;width:100%;height:3.429vw ;margin-top:-4.5vw">
                                    <span style="font-size:2.5vw;color:#f34d73">3折封顶</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div>
                <img :src="list[0]" alt="" style="position:relative">
                <ul style="position:absolute;z-index:2;">
                    <li v-for="(item,index) in com2">
                        <img :src="item.src" alt="">
                        <span style="font-size:2.5vw;">{{item.con}}</span>
                        <div style="position:relative;line-height:3.1vw;width:100%;height:3.429vw ; background-color:#f2983a;border-radius:3.429vw;margin:1.5vw 0">
                            <span style="font-size:2.5vw;color:#fff;">{{item.msg}}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div>
                <div style="position:relative;height:43.333vw">
                    <div style="width:50%;float:left">
                        <img :src="list[1]" alt="" style="position:relative;width:100%;">
                        <ul class="com3">
                            <li v-for="(item,index) in com3">
                                <img :src="item.src" alt="">
                                <div style="width:100%;background-color:#fff;margin-top:-1vw;border-radius:0 0 1vw 1vw;height:5vw">
                                    <div style="color:#f14470;font-size:1.5vw;float:left;width:40%;line-height:5vw">特卖价</div><div style="position:absolute;right:0;width:70%;line-height:5vw">{{item.price}}</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div style="width:50%;float:left">
                        <img :src="list[2]" alt="" style="position:relative;width:100%;">
                        <ul class="com4">
                            <li v-for="(item,index) in com4">
                                <img :src="item.src" alt="">
                                <div style="width:100%;background-color:#fff;margin-top:-1vw;border-radius:0 0 1vw 1vw;height:5vw">
                                    <div style="color:#f14470;font-size:1.5vw;float:left;width:40%;line-height:5vw">特卖价</div><div style="position:absolute;right:0;width:70%;line-height:5vw">{{item.price}}</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
    </main>
</template>
<script>
    export default{
        data(){
            return{
                list:[],
                com:[],
                com2:[],
                com3:[],
                com4:[]
            }
        },
        mounted(){
            this.$http.get('./data/fq.json', {

            })
            .then((response)=> {
                console.log(response);
                this.list=response.data.list
                this.com=response.data.com
                this.com2=response.data.com2
                this.com3=response.data.com3
                this.com4=response.data.com4
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            });  
        }
    }
</script>
<style scoped>
    main{
        background-color: #f5f5f5;
    }
    header>div>img{
        width: 94vw;
    }
    header>div:nth-of-type(1){
        height: calc(94vw*0.4);
    }
    header>div:nth-of-type(2){
        height: calc(94vw*80/750);
    }
    header>div:nth-of-type(3){
        height: calc(94vw*102/750);
    }
    header>div:nth-of-type(4){
        height: calc(94vw*597/750);
    }
    header>div{
        position: relative;
        clear: both;
        padding: 0 3vw; 
    }
    header>div:nth-of-type(4)>ul{
        position: absolute;
        margin: 0 3vw;
        width: 88vw;
        height: 99%;
    }
    header>div:nth-of-type(4)>ul>li{
        position: relative;
        float: left;
        width: 33.333%;
        height: 50%;
        text-align: center;
        padding: 0 1vw 2vw 1vw;
    }
    header>div:nth-of-type(4)>ul>li>img{
        width: 100%;
        height: 100%;
        border-radius: 2vw;
    } 
    header>div:nth-of-type(5)>ul{
        position: absolute;
        margin: 0 3vw;
        width: 88vw;
        height: 100%;
        top:11vw;
    }
    header>div:nth-of-type(5)>ul>li{
        position: relative;
        float: left;
        width: 25%;
        text-align: center;
        padding: 0 0.5vw 0 ;
    }
    header>div:nth-of-type(5)>ul>li>img{
        width: 100%;
        height: 100%;
        border-radius: 1vw;
    } 
    .com3{
        position: absolute;
        margin: 0 3.2vw;
        width: 44vw;
        /* height: 100%; */
        top:11vw;
    }
    .com3>li{
        position: relative;
        float: left;
        width: 48%;
        text-align: center;
        padding: 0 0.5vw 0 ;
    }
    .com3>li>img{
        width: 100%;
        height: 100%;
        border-radius: 1vw 1vw 0 0;
    } 
    .com4{
        position: absolute;
        margin: 0 1.8vw;
        width: 44vw;
        /* height: 100%; */
        top:11vw;
    }
    .com4>li{
        position: relative;
        float: left;
        width: 48%;
        text-align: center;
        padding: 0 0.5vw 0 ;
    }
    .com4>li>img{
        width: 100%;
        height: 100%;
        border-radius: 1vw 1vw 0 0;
    } 
</style>